<template>
  <div>
    <el-container style="height: 100vh">
      <el-aside
        class="aside"
        :style="{ width: `${isCollapse ? 65 : 200}px`, transition: '0.3s' }"
      >
        <el-menu
          router
          :default-active="$route.path"
          :style="{ 'min-height': '100vh' }"
          :collapse="isCollapse"
          class="el-menu-vertical-demo"
          collapse-transition
        >
          <el-menu-item index="/home/index">
            <i class="el-icon-s-home"></i>
            <template slot="title"> &nbsp;首&nbsp;&nbsp;&nbsp;页 </template>
          </el-menu-item>
          <el-submenu index="1" class="hover">
            <template slot="title">
              <i class="el-icon-s-help"></i>
              <span slot="title">车辆管理</span>
            </template>
            <el-menu-item index="/home/car-estimate">
              <i class="el-icon-reading"></i>
              <span slot="title">车辆评估</span>
            </el-menu-item>
            <el-menu-item index="/home/car-management">
              <i class="el-icon-notebook-2"></i>
              <span slot="title">车辆列表</span>
            </el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-loading"></i>
              <span slot="title">员工管理</span>
            </template>
            <el-menu-item index="/home/member-list">
              <i class="el-icon-notebook-2"></i>
              <span slot="title">员工列表</span>
            </el-menu-item>
            <el-menu-item index="/home/member-add">
              <i class="el-icon-set-up"></i>
              <span slot="title">新增员工</span>
            </el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-s-custom"></i>
              <span slot="title">客户管理</span>
            </template>
            <el-menu-item index="/home/customer-list">
              <i class="el-icon-notebook-2"></i>
              <span slot="title">客户信息</span>
            </el-menu-item>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-s-tools"></i>
              <span slot="title">系统设置</span>
            </template>
            <el-menu-item index="/home/user-add">
              <i class="el-icon-set-up"></i>
              <span slot="title">新增用户</span>
            </el-menu-item>
            <el-menu-item index="/home/user-update">
              <i class="el-icon-info"></i>
              <span slot="title">修改个人信息</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header class="header" style="height: 80px">
          <el-radio-group v-model="isCollapse">
            <el-radio-button :label="false">详</el-radio-button>
            <el-radio-button :label="true">简</el-radio-button>
          </el-radio-group>
          <el-image
            style="height: 79px; margin-left: 20px"
            :src="require('/public/img/迢迢.gif')"
          ></el-image>
          &nbsp;&nbsp;&nbsp;
          <!-- 面包屑导航 -->
          <el-breadcrumb style="flex: 1" separator-class="el-icon-arrow-right">
            <el-breadcrumb-item
              v-for="item in $route.meta.thumbs"
              :key="item.name ? item.name : item"
              :to="item.to ? item.to : ''"
              >{{ item.name ? item.name : item }}</el-breadcrumb-item
            >
          </el-breadcrumb>
          <img
            :src="`${form.userPic}`"
            style="width: 77px; height: 77px; margin-right: 20px"
          />
          <span style="margin-right: 20px">{{ form.username }},欢迎登录!</span>
          <i class="el-icon-switch-button" @click="logout"></i>
        </el-header>
        <el-main>
          <transition
            :duration="500"
            enter-active-class="animate__animated animate__backInLeft"
            leave-active-class="animate__animated"
            name="fade-right"
            mode="out-in"
          >
            <router-view></router-view>
          </transition>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { mapState } from "vuex";
import "animate.css";
export default {
  name: "animateWrap",
  data() {
    return {
      isCollapse: false,
      form: {
        username: "",
        userPic: "",
      },
    };
  },
  mounted() {
    this.form.username = this.user.username;
    this.form.userPic = this.user.pic;
  },
  methods: {
    logout() {
      sessionStorage.removeItem("user");
      this.$store.dispatch("login", "");
      this.$router.push("/user/login");
    },
  },
  computed: mapState(["user"]),
};
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;

  i {
    font-size: 1.3em;
    color: #000;
  }
}

.aside::-webkit-scrollbar {
  display: none;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 240px;
  min-height: 400px;
}

.el-menu-vertical-demo {
  background: linear-gradient(#5f9aff, #50cfff);

  .el-menu-item {
    font-size: 20px;

    i {
      font-size: 20px;
      color: #000;
    }

    span {
      font-size: 18px;
    }
  }
}

.el-submenu__title {
  i {
    color: #000;
  }

  span {
    color: #000;
    font-size: 20px;
  }
}

.el-menu--inline {
  .el-menu-item {
    background: radial-gradient(#5f9aff, #50cfff);
    i {
      color: #000;
    }
  }
}

.el-menu-item.is-active {
  background: radial-gradient(#5f9aff, #50cfff);
  color: #fff;

  i {
    color: #fff;
  }
}
</style>
